<template>
  <div>
    <div class="sp-cont-table-title">
      <div class="sp-table-title_le">
        <span>险种信息</span>
      </div>
      <div class="sp-table-title_ri">^</div>
    </div>
    <div class="sp-cont-tablepage">
      <el-table
        :data="tableData"
        border
        :header-cell-style="{ background: '#cccccc' }"
      >
        <el-table-column label="序号" type="index" width="50" align="center">
        </el-table-column>
        <el-table-column prop="date1" label="客户号码" align="center">
        </el-table-column>
        <el-table-column prop="date2" label="客户姓名" align="center">
        </el-table-column>
        <el-table-column prop="date3" label="属性" align="center">
        </el-table-column>
        <el-table-column prop="date4" label="证件类型" align="center">
        </el-table-column>
        <el-table-column prop="date5" label="证件号码" align="center">
        </el-table-column>
        <el-table-column prop="date6" label="是否长期" align="center">
        </el-table-column>
        <el-table-column prop="date7" label="证件类型是否有效" align="center">
        </el-table-column>
        <el-table-column prop="date8" label="生日" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div class="sp-operation">
              <div @click="deleter(scope.row)">
                <span style="cursor: pointer">操作</span>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="sp-cont-dialog">
      <div class="sp-cont-dialog-name">
        <span>险种信息</span>
      </div>
      <div class="sp-cont-dialog-add_a" @click="dialogVisibletow = true">
        <div class="sp-cont-dialog-add_aicon"><span>+</span></div>
        <div class="sp-cont-dialog-add_aname">
          <span>添加主险</span>
        </div>
      </div>
      <div class="sp-cont-dialog-add_a" @click="dialogVisiblethree = true">
        <div class="sp-cont-dialog-add_aicon"><span>+</span></div>
        <div class="sp-cont-dialog-add_aname">
          <span>添加险加险</span>
        </div>
      </div>
      <div class="sp-cont-dialog-add_a" @click="dialogVisiblefour = true">
        <div class="sp-cont-dialog-add_aicon"><span>+</span></div>
        <div class="sp-cont-dialog-add_aname">
          <span>增加保险计划</span>
        </div>
      </div>
      <div class="sp-cont-dialog-icon">^</div>
    </div>

    
    <div class="sp-cont-tablepage">
      <el-table
        :data="tableData"
        border
        :header-cell-style="{ background: '#cccccc' }"
      >
        <el-table-column label="序号" type="index" width="50" align="center">
        </el-table-column>
        <el-table-column prop="date1" label="保单单险种号" align="center">
        </el-table-column>
        <el-table-column prop="date2" label="险种编码" align="center">
        </el-table-column>
        <el-table-column prop="date3" label="险种名称" align="center">
        </el-table-column>
        <el-table-column prop="date4" label="主/附险标志" align="center">
        </el-table-column>
        <el-table-column prop="date5" label="保费" align="center">
        </el-table-column>
        <el-table-column prop="date6" label="保额" align="center">
        </el-table-column>
        <el-table-column prop="date7" label="分数" align="center">
        </el-table-column>
        <el-table-column prop="date8" label="交费频率" align="center">
        </el-table-column>
        <el-table-column prop="date9" label="交费年期" align="center">
        </el-table-column>
        <el-table-column prop="date10" label="交费年期单位" align="center">
        </el-table-column>
        <el-table-column prop="date11" label="保险年期" align="center">
        </el-table-column>
        <el-table-column prop="date12" label="保险年期单位" align="center">
        </el-table-column>
        <el-table-column prop="date13" label="保险期间" align="center">
        </el-table-column>
        <el-table-column prop="date14" label="保险计划编码" align="center">
        </el-table-column>
        <el-table-column prop="date15" label="保险计划名称" align="center">
        </el-table-column>
        <el-table-column prop="date16" label="自动续保标志" align="center">
        </el-table-column>
        <el-table-column prop="date17" label="领取频率" align="center">
        </el-table-column>
        <el-table-column prop="date18" label="红利领取方式" align="center">
        </el-table-column>
        <el-table-column prop="date19" label="年金领取方式" align="center">
        </el-table-column>
        <el-table-column prop="date20" label="领取年龄年期" align="center">
        </el-table-column>
        <el-table-column prop="date21" label="领取年期年龄单位" align="center">
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div class="sp-operation">
              <div @click="deleter(scope.row)">
                <span style="cursor: pointer">操作</span>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
           
    </div>
    
   
         
    <div class="sp-cont-table-title">
      <div class="sp-table-title_le">
        <span>可选责任信息</span>
      </div>
      <div class="sp-table-title_ri">^</div>
    </div>
    <div class="sp-cont-tablepage">
      <el-table
        :data="tableData"
        border
        :header-cell-style="{ background: '#cccccc' }"
      >
        <el-table-column label="序号" type="index" width="50" align="center">
        </el-table-column>
        <el-table-column prop="date1" label="险种编码" align="center">
        </el-table-column>
        <el-table-column prop="date2" label="险种名称" align="center">
        </el-table-column>
        <el-table-column prop="date3" label="责任编码" align="center">
        </el-table-column>
        <el-table-column prop="date4" label="责任名称" align="center">
        </el-table-column>
        <el-table-column prop="date5" label="责任保额" align="center">
        </el-table-column>
        <el-table-column prop="date6" label="责任保费" align="center">
        </el-table-column>
        <el-table-column prop="date7" label="责任保险期间" align="center">
        </el-table-column>
        <el-table-column prop="date8" label="责任保险期间单位" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div class="sp-operation">
              <div @click="deleter(scope.row)">
                <span style="cursor: pointer">操作</span>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="sp-cont-dialog">
      <div class="sp-cont-dialog-name">
        <span>受益人信息</span>
      </div>
      <div class="sp-cont-dialog-add_a" @click="dialogVisible = true">
        <div class="sp-cont-dialog-add_aicon"><span>+</span></div>
        <div class="sp-cont-dialog-add_aname">
          <span>添加受益人</span>
        </div>
      </div>
      <div></div>
      <div></div>
      <div class="sp-cont-dialog-icon">^</div>
    </div>
    <div class="sp-cont-tablepage">
      <el-table
        :data="tableData"
        border
        :header-cell-style="{ background: '#cccccc' }"
      >
        <el-table-column label="序号" type="index" width="50" align="center">
        </el-table-column>
        <el-table-column prop="date1" label="险种编码" align="center">
        </el-table-column>
        <el-table-column prop="date2" label="险种名称" align="center">
        </el-table-column>
        <el-table-column prop="date3" label="责任编码" align="center">
        </el-table-column>
        <el-table-column prop="date4" label="责任名称" align="center">
        </el-table-column>
        <el-table-column prop="date5" label="责任保额" align="center">
        </el-table-column>
        <el-table-column prop="date6" label="责任保费" align="center">
        </el-table-column>
        <el-table-column prop="date7" label="责任保险期间" align="center">
        </el-table-column>
        <el-table-column prop="date8" label="责任保险期间单位" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div class="sp-operation">
              <div @click="deleter(scope.row)">
                <span style="cursor: pointer">操作</span>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="sp-cont-table-title">
      <div class="sp-table-title_le">
        <span>特约信息</span>
      </div>
      <div class="sp-table-title_ri">^</div>
    </div>
    <div class="sp-textbox">
      <span>特约信息：</span>
      <textarea
        v-model="desc"
        style="width: 90%; height: 100px; outline: none; resize: none"
      ></textarea>
      <!-- 文本框已已设置禁止缩放 resize: none -->
    </div>
    <div class="sp-flooter">
      <div class="sp-flooter_le">
        <div class="sp-flooter_le-bton">
          <div class="sp-flooter-bton_cloumm">
            <div class="sp-flooter_botten">
              <span>复核通过</span>
            </div>
          </div>
          <div class="sp-flooter-bton_cloumm">
            <div class="sp-flooter_botten">
              <span>复核完毕</span>
            </div>
          </div>
          <div class="sp-flooter-bton_cloumm">
            <div class="sp-flooter_botten">
              <span>问题件录入</span>
            </div>
          </div>
          <div class="sp-flooter-bton_cloumm">
            <div class="sp-flooter_botten">
              <span>错误字段标记</span>
            </div>
          </div>
        </div>
      </div>
      <div class="sp-flooter_ri">
        <div class="sp-flooter_ri-bton">
          <div class="sp-flooter_ri-margin">
            <div class="sp-flooter_botten bottenMargin">
              <span>录单完毕</span>
            </div>
            <div class="sp-flooter_botten bottenMargin">
              <span>新增险种</span>
            </div>
            <div class="sp-flooter_botten bottenMargin" @click="tonext()">
              <span>下一步</span>
            </div>
          </div>
          <div>
            <div class="sp-flooter_botten bottenMargin">
              <span>修改险种</span>
            </div>
            <div class="sp-flooter_botten bottenMargin">
              <span>规则引擎投保信息</span>
            </div>
            <div class="sp-flooter_botten bottenMargin">
              <span>未通过的投保规则查询</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      desc: "",
    };
  },
  methods: {
    tonext() {
      this.$emit('tonext','index1');
    },
    typename(e) {
      switch (e) {
        case "InsuranceAddtow":
          this.dialogVisibletow = false;
          break;
        case "InsuranceAddthree":
          this.dialogVisiblethree = false;
          break;
        case "InsuranceAddfour":
          this.dialogVisiblefour = false;
          break;
        case "InsuranceAdd":
          this.dialogVisible = false;
          break;
      }
    },
  },
};
</script>
<style scoped>
.sp-textbox {
  width: 95%;
  height: 150px;
  margin: auto;
  display: flex;
  align-items: center;
}
.sp-flooter_le {
  flex: 0.7;
}
.sp-flooter_ri {
  flex: 0.6;
}
.sp-flooter-bton_cloumm {
  padding-right: 25px;
}
</style>